<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <div class="fixed fixed-center relative-position">
      <div class="absolute-center">
        <q-spinner color="primary" size="165px" :thickness="1" />
      </div>

      <q-avatar size="120px" color="primary">
        <img src="~assets/img/logo-96x96.png" class="vertical-top" />
      </q-avatar>
    </div>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent } from "quasar";

export default {
  name: "ComponentsDialogsLoadingDialogVue",
  emits: [...useDialogPluginComponent.emits],
  setup() {
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
      useDialogPluginComponent();
    return {
      dialogRef,
      onDialogHide,
      onOKClick() {
        onDialogOK();
      },
      onCancelClick: onDialogCancel,
    };
  },
};
</script>
